@import (less) "../mixin.less";


/*
 # Messages
*/

div.messages {
    font-size: 12px;
    line-height: 1.5;
	margin: 0;
	padding: 0;
	border: none;
	background: #5a5;
	background-position: 1em center; /* LTR */
	background-repeat: no-repeat;
	background-image: none !important;
	text-align: left;
	color: white;
	font-weight: 600;
	border: none;
	
	.wrapper {
		padding: 10px 10px 10px 50px;
		background-image: url('/misc/message-24-ok.png');
		*background-image: url('/misc/message-24-ok.png');
		background-repeat: no-repeat;
		background-position: 1em center; /* LTR */
		
		&:before,
		&:after {
			display: none;
		}
	}
	ul {
        line-height: inherit;
		padding: 0 0 0 1em;
	}
    li {
        margin: 0;
    }
	.krumo-root {
		color: @dark;
        
		ul {
			margin: 0;
            border: none;
		}
	}
	& > .krumo-root {
		margin: -12px -24px;
    }
}
div.messages.warning,
div.messages--warning {
	background-color: #ed5;
	color: @dark;
	
	.wrapper {
		background-image: url('/misc/message-24-warning.png');
		*background-image: url('/misc/message-24-warning.png');
	}
}
div.messages.error,
div.messages--error {
	background-color: #c44;
	
	.wrapper {
		background-image: url('/misc/message-24-error.png');
		*background-image: url('/misc/message-24-error.png');
	}
}
div.messages__list {
	margin: 0;
}
div.messages__item {
	list-style-image: none;
}

/*
 # Tabs.
*/

.tabs-primary,
.tabs-secondary {
	font-size: 10px;
	color: @dark;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style: none;
	border-bottom: 1px solid @light;
	overflow: hidden;
	
	position: fixed;
	bottom: 0;
	z-index: 10;
	
	body.not-logged-in & {
		display: none;
	}
}
.tabs-primary {
    right: 1em;
}
.tabs-secondary {
    left: 1em;
}
.tabs-primary__tab,
.tabs-secondary__tab {
	float: left;
	margin: 0 2px 0 0;
}
a.tabs-primary__tab-link,
a.tabs-secondary__tab-link {
	text-align: center;
	text-decoration: none;
	line-height: 1.5em;
	color: inherit;
	display: block;
	padding: 0 1em;
	background: @light;
	.transition();
	
	-moz-border-radius-topleft: 4px;
	-webkit-border-top-left-radius: 4px;
	border-top-left-radius: 4px;
	-moz-border-radius-topright: 4px;
	-webkit-border-top-right-radius: 4px;
	border-top-right-radius: 4px;
	
	&:hover,
	&:focus {
		background: @xenyo;
		color: @dark;
	}
	&.active,
	&.is-active {
		background: white;
	}
}